<template>
  <JVxeTable
    ref="tableRef"
    row-number
    keyboardEdit
    :maxHeight="tableHeight.noToolbar"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :disabled="!actionButton"
    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
    v-bind="tableProps"
  />
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
  import { useTableSync } from '../../use/useTableSync';

  export default defineComponent({
    name: 'ForeignKeyTable',
    props: {
      actionButton: { type: Boolean, default: true },
    },
    setup() {
      const columns = ref([
        { title: '字段名称', key: 'dbFieldName', width: 160 },
        { title: '字段备注', key: 'dbFieldTxt', width: 160 },
        {
          title: '主表名',
          key: 'mainTable',
          width: 280,
          type: JVxeTypes.input,
          defaultValue: '',
        },
        {
          title: '主表字段',
          key: 'mainField',
          width: 280,
          type: JVxeTypes.input,
          defaultValue: '',
        },
      ]);
      const setup = useTableSync(columns);
      return Object.assign({}, setup, { columns });
    },
  });
</script>
